<template>
  <div id="jobDetail">
    <el-dialog
      class="about-set"
      title="作业要求详细"
      :visible.sync="dialogData.isShow"
      width="795px"
      :before-close="labelHandleClose"
    >
      作业要求
      <dl v-loading="loading">
        <dt>{{ formData.title }}</dt>
        <dd>
          <label>课程名称</label> ：
          <span>{{ formData.courseTitle }}</span>
        </dd>
        <dd>
          <label>讲师</label>：
          <span>{{ formData.nickName }}</span>
        </dd>
        <dd>
          <label>作业要求</label>：
          <ul>
            <li v-html="formData.content"></li>
          </ul>
        </dd>
        <dd>
          <label>发布日期</label>：
          <span>{{ formData.liveClassId | timeToTime }}</span>
        </dd>
        <dd>
          <label>截止日期</label>：
          <span>{{ formData.deadLine | timeToTime }}</span>
        </dd>
        <dd>
          <label>作业案例图</label>：
          <span class="f-r">已提交：{{ formData.submitCount }}</span>
        </dd>
      </dl>
      <div v-if="formData.vid" class="video-box">
        <videoFace :img-src="formData.img" :vid="formData.vid"></videoFace>
      </div>
      <img v-else :src="formData.img" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { getTaskDetail } from '@/api/jobManagement' // 接口
import videoFace from '@common/videoFace'
export default {
  name: 'JobDetail',
  msg: '作业管理-作业维护/我的发布--作业要求详细弹窗',
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      taskId: null,
      formData: {}
    }
  },
  components: {
    videoFace
  },
  mounted() {
    this.taskId = this.dialogData.params
    this.stageId = this.dialogData.stageId
    this.getDetail()
  },
  methods: {
    /* 获取详情 */
    getDetail() {
      this.loading = true
      let obj = {
        stageId: this.stageId
      }
      getTaskDetail(this.taskId, obj, (response) => {
        this.loading = false
        this.formData = { ...response }
        this.formData.img = response.imgSmall.split(',')[0]
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.params = null
      this.dialogData.stageId = null
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel() {
      this.loading = true
      this.cancelLabel()
    }
  }
}
</script>

<style lang="less">
#jobDetail {
  color: #999;
  .el-dialog__body {
    line-height: 30px;
    font-size: 16px !important;
    padding: 15px 40px !important;
    max-height: 650px;
    overflow: auto;
  }
  dl {
    dt {
      font-size: 18px;
      font-weight: 900;
      color: #333;
      padding: 20px 0;
    }

    dd {
      display: flex;
      label {
        width: 80px;
        text-align-last: justify;
        display: inline-block;
        margin-bottom: 5px;
      }
      span,
      ul {
        flex: 1;
        display: inline-block;
        &.f-r {
          text-align: right;
        }
      }
    }
  }
  .video-box {
    width: 100%;
    height: 420px;
    .el-dialog__body {
      padding: 0 !important;
    }
  }
  img {
    width: 100%;
  }
}
</style>
